<template>
    <page-view>
       
        <el-card>
            <template #header>
          <div class="flex flex-row justify-between">
            <div class="font-bold">新增菜品分类</div>
            <el-link type="primary" @click="$router.replace({name:'CategoryInfoList'})">返回列表</el-link>
          </div>
        </template>
            <el-form label-width="120px" ref="formEl" :model="cateInfoData" :rules="categoryInfoDataRules">
                <el-form-item label="分类名称" prop="c">
                    <el-input placeholder="请输入菜品分类名称" v-model="cateInfoData.category_name" />
                </el-form-item>
            </el-form>
            <el-form-item>
                <el-button type="primary"  @click="submitForm" :loading="isSubmiting" :loading-icon="Loading">保存数据
                </el-button>
                <el-button type="danger" @click="resetForm">重置表单</el-button>
            </el-form-item>
        </el-card>
    </page-view>

</template>

<script setup>
import { PictureFilled, Loading } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { reactive, ref, inject } from "vue";
import API from "@/utils/API/index.js";
import { mainStore } from "../../store/index.js";
import { useRouter } from "vue-router";


const store = mainStore();
const baseURL = inject("baseURL");
const router = useRouter();
const cateInfoData = reactive({
    category_name: "",
});
//表单验证的规则
const categoryInfoDataRules = {
    category_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],

}

const formEl = ref(null);
const submitForm = () => {
    //验证表单的数据是否合格
    // console.log(formEl.value)
    formEl.value.validate(valid => {
        //这个valid就是验证的结果
        if (valid) {
            //表单验证成功，我们要提交数据
            addFoodInfo();
        } else {
            ElNotification({
                type: "warning",
                title: "提示",
                message: "请正确的填写表单的内容"
            })
        }
    });
}

//编写一个方法，用于新增菜品
const isSubmiting = ref(false);
const addFoodInfo = () => {
    isSubmiting.value = true;
    API.categoryInfo.add(cateInfoData)
        .then(result => {
            ElNotification({
                type: "success",
                title: "提示",
                message: "新增分类成功"
            });
            router.replace({ name: "CategoryInfoList" });

        })
        .catch(error => {
            ElNotification({
                type: "danger",
                title: "失败了",
                message: "新增分类失败，请重试或联系管理员"
            });
            console.log(error);
        })
        .finally(() => {
            isSubmiting.value = false;
        })
}

//重置表单

const resetForm = () => {

    formEl.value.resetFields();
}



</script>

<style >

</style>